<template>
  <div id="relocationPage">
    <!-- 搜索区域 -->
    <el-row type="flex" justify="start" style="width: 100%; margin-bottom: 20px">
      <el-col :span="24">
        <el-card>
          <el-form ref="searchFormComponents" :model="searchForm" inline>
            <el-row :gutter="10">
              <!-- 仓库编号 -->
              <el-col :span="4">
                <el-form-item label="仓库编号" prop="warehouseCode">
                  <el-input v-model="searchForm.warehouseCode" clearable placeholder="仓库编号" style="width: 100%"></el-input>
                </el-form-item>
              </el-col>

              <!-- 区域编号 -->
              <el-col :span="4">
                <el-form-item label="区域编号" prop="regionCode">
                  <el-input v-model="searchForm.regionCode" clearable placeholder="区域编号" style="width: 100%"></el-input>
                </el-form-item>
              </el-col>

              <!-- 货物批次 -->
              <el-col :span="4">
                <el-form-item label="货物批次" prop="goodsBatch">
                  <el-input v-model="searchForm.goodsBatch" clearable placeholder="货物批次" style="width: 100%"></el-input>
                </el-form-item>
              </el-col>

              <!-- 搜索按钮 -->
              <el-col :span="4" class="search-button-col">
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                  <el-button icon="el-icon-refresh" @click="resetSearch">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <el-row type="flex" justify="start" :gutter="10">
            <el-col>
              <el-button type="primary" @click="showAddModal" class="action-button">
                <i class="el-icon-plus"></i> 新增
              </el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 表格区域 -->
    <el-card>
      <el-table
          :data="listData"
          style="width: 100%"
          v-loading="loading"
          tooltip-effect="dark"
          border
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
          @selection-change="handleSelectionChange"
      >
        <!-- 多选列 -->
        <el-table-column type="selection" width="55" align="center" fixed="left"></el-table-column>

        <!-- 序号 -->
        <el-table-column type="index" label="序号" width="60" :index="calculateIndex" align="center"></el-table-column>

        <!-- 仓库编号 -->
        <el-table-column prop="warehouseCode" label="仓库编号" show-overflow-tooltip width="120" align="center"></el-table-column>

        <!-- 区域编号 -->
        <el-table-column prop="regionCode" label="区域编号" show-overflow-tooltip align="center" width="100"></el-table-column>

        <!-- 仓位类型 -->
        <el-table-column prop="regionTypeName" label="仓位类型" show-overflow-tooltip align="center" width="100"></el-table-column>

        <!-- 货物类型 -->
        <el-table-column prop="goodsType" label="货物类型" show-overflow-tooltip align="center" width="100"></el-table-column>

        <!-- 货物数量 -->
        <el-table-column prop="goodsNum" label="货物数量" show-overflow-tooltip align="center" width="100"></el-table-column>

        <!-- 货物批次 -->
        <el-table-column prop="goodsBatch" label="货物批次" show-overflow-tooltip align="center" width="100"></el-table-column>

        <!-- 移库时间 -->
        <el-table-column prop="relocationTime" label="移库时间" show-overflow-tooltip align="center" width="120"></el-table-column>

        <!-- 操作列 -->
        <el-table-column fixed="right" label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="primary" size="mini" class="action-button">
              <i class="el-icon-edit"></i> 编辑
            </el-button>
            <el-button @click="handleDelete(scope.row)" type="danger" size="mini" class="action-button">
              <i class="el-icon-delete"></i> 删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="searchForm.current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="searchForm.pageSize"
            :total="searchForm.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 新增记录 -->
    <el-dialog title="新增移库记录" :visible.sync="addDialogVisible" width="500px" custom-class="compact-dialog">
      <el-form :model="addForm" ref="addForm" label-width="90px" class="compact-form">
        <!-- 仓库 & 区域 -->
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="仓库编号" prop="warehouseCode" class="required">
              <el-input v-model="addForm.warehouseCode" placeholder="请输入仓库编号" style="width: 130px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="区域编号" prop="regionCode" class="required">
              <el-input v-model="addForm.regionCode" placeholder="请输入区域编号" style="width: 130px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 货架类型 & 货物类型 -->
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="仓位类型" prop="regionTypeName" class="required">
              <el-input v-model="addForm.regionTypeName" placeholder="请输入货架类型" style="width: 130px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货物类型" prop="goodsType" class="required">
              <el-input v-model="addForm.goodsType" placeholder="请输入货物类型" style="width: 130px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 数量 & 批次 -->
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="货物数量" prop="goodsNum" class="required">
              <el-input-number v-model="addForm.goodsNum" :min="0" controls-position="right" style="width: 130px"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货物批次" prop="goodsBatch" class="required">
              <el-input v-model="addForm.goodsBatch" placeholder="请输入批次号" style="width: 130px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 移库时间 -->
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="移库时间" prop="relocationTime">
              <el-date-picker
                  v-model="addForm.relocationTime"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false" class="cancel-btn">取 消</el-button>
          <el-button type="primary" @click="submitAddForm" class="confirm-btn">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑记录 -->
    <el-dialog title="编辑移库记录" :visible.sync="editDialogVisible" width="500px" custom-class="compact-dialog">
      <el-form :model="editForm" ref="editForm" label-width="90px" class="compact-form">
        <!-- 仓库 & 区域 -->
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="仓库编号" prop="warehouseCode" class="required">
              <el-input v-model="editForm.warehouseCode" placeholder="请输入仓库编号" style="width: 130px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="区域编号" prop="regionCode" class="required">
              <el-input v-model="editForm.regionCode" placeholder="请输入区域编号" style="width: 130px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 货架类型 & 货物类型 -->
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="仓位类型" prop="regionTypeName" class="required">
              <el-input v-model="editForm.regionTypeName" placeholder="请输入仓位类型" style="width: 130px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货物类型" prop="goodsType" class="required">
              <el-input v-model="editForm.goodsType" placeholder="请输入货物类型" style="width: 130px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 数量 & 批次 -->
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="货物数量" prop="goodsNum" class="required">
              <el-input-number v-model="editForm.goodsNum" :min="0" controls-position="right" style="width: 130px"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货物批次" prop="goodsBatch" class="required">
              <el-input v-model="editForm.goodsBatch" placeholder="请输入批次号" style="width: 130px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 移库时间 -->
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="移库时间" prop="relocationTime">
              <el-date-picker
                  v-model="editForm.relocationTime"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false" class="cancel-btn">取 消</el-button>
          <el-button type="primary" @click="submitEditForm" class="confirm-btn">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request';

export default {
  data() {
    return {
      listData: [],
      selectedItems: [],
      searchForm: {
        warehouseCode: '',
        regionCode: '',
        goodsBatch: '',
        current: 1,
        pageSize: 10,
        total: 0
      },
      addForm: {
        warehouseCode: '',
        regionCode: '',
        regionTypeName: '',
        goodsType: '',
        goodsNum: null,
        goodsBatch: '',
        relocationTime: ''
      },
      editForm: {
        warehouseCode: '',
        regionCode: '',
        regionTypeName: '',
        goodsType: '',
        goodsNum: null,
        goodsBatch: '',
        relocationTime: ''
      },
      loading: false,
      addDialogVisible: false,
      editDialogVisible: false
    };
  },
  mounted() {
    this.getMoveWareList();
  },
  methods: {
    getMoveWareList() {
      this.loading = true;
      request.post('/moveWarehouse/moveWareList', this.searchForm)
          .then(response => {
            const res = response.data;
            if (res.code === '200') {
              // 映射字段
              this.listData = res.data.data.map(item => ({
                warehouseCode: item.warehouseCode,
                regionCode: item.regionCode,
                regionTypeName: item.regionTypeName,
                goodsType: item.goodsType,
                goodsNum: item.nowNum,
                goodsBatch: item.gbatch,
                relocationTime: item.relTime
              }));
              this.searchForm.total = res.data.total || res.data.data.length;
            } else {
              this.listData = [];
              this.searchForm.total = 0;
              this.$message.error(res.errMsg || '加载失败');
            }
          })
          .catch(error => {
            console.error('获取移库记录失败:', error);
            this.$message.error('获取移库记录失败');
          })
          .finally(() => {
            this.loading = false;
          });
    },

    // 搜索
    search() {
      this.searchForm.current = 1;
      this.getMoveWareList();
    },
    // 重置
    resetSearch() {
      this.$refs.searchFormComponents.resetFields();
      this.searchForm.current = 1;
      this.getMoveWareList();
    },
    // 分页
    handleSizeChange(newSize) {
      this.searchForm.pageSize = newSize;
      this.searchForm.current = 1;
      this.getMoveWareList();
    },
    handleCurrentChange(newPage) {
      this.searchForm.current = newPage;
      this.getMoveWareList();
    },
    // 新增
    showAddModal() {
      this.addForm = {
        warehouseCode: '',
        regionCode: '',
        regionTypeName: '',
        goodsType: '',
        goodsNum: null,
        goodsBatch: '',
        relocationTime: ''
      };
      this.addDialogVisible = true;
    },
    submitAddForm() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          request.post(`/moveWarehouse/add`, this.addForm)
              .then(res => {
                if (res.data.code === '200') {
                  this.$message.success('添加成功');
                  this.addDialogVisible = false;
                  this.getMoveWareList();
                } else {
                  this.$message.error('添加失败');
                }
              })
              .catch(err => {
                console.error('添加失败:', err);
                this.$message.error('添加失败');
              });
        }
      });
    },
    // 编辑
    handleEdit(row) {
      this.editForm = { ...row };
      this.editDialogVisible = true;
    },
    submitEditForm() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          request.post(`/moveWarehouse/update`, this.editForm)
              .then(res => {
                if (res.data.code === '200') {
                  this.$message.success('修改成功');
                  this.editDialogVisible = false;
                  this.getMoveWareList();
                } else {
                  this.$message.error('修改失败');
                }
              })
              .catch(err => {
                console.error('修改失败:', err);
                this.$message.error('修改失败');
              });
        }
      });
    },
    // 删除
    handleDelete(row) {
      this.$confirm('是否删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.post('/moveWarehouse/delete', { gbatch: row.goodsBatch })
            .then(res => {
              if (res.data.code === '200') {
                this.$message.success('删除成功');
                this.getMoveWareList();
              } else {
                this.$message.error('删除失败');
              }
            })
            .catch(err => {
              console.error('删除失败:', err);
              this.$message.error('删除失败');
            });
      }).catch(() => {});
    },
    handleSelectionChange(selection) {
      this.selectedItems = selection;
    }
  }
};
</script>


<style scoped>
#relocationPage {
  padding: 20px;
}
.search-button-col {
  display: flex;
  justify-content: flex-end;
}
.pagination-container {
  margin-top: 15px;
}
</style>
